<template>
    <fieldset>
        <legend>子子组件</legend>
        <h1>reactive:{{ name }}</h1>
        <ul>
            <li v-for="item in arr" :key="item">{{ item }}</li>
        </ul>
        <subSubChild ref="sub"></subSubChild>
    </fieldset>
</template>
<script setup>

import {reactive, ref, toRefs} from "vue"

// --------reactive------------

//是一个响应式api,能够将对象(数组 正则 对象..)类型的数据,变成响应式

//reactive在逻辑层使用的时候不需要.value属性,直接修改对象对应的属性就可以啦

//在组合式编程中,不要把响应式变量的内容直接替换,这样视图是不会更新的

let person = reactive({
    name: '李雷',
    hobby: '挖呀挖'
})


let arr = ref(['吃饭', '吃菜', '吃蛋糕', '吃水果'])

setTimeout(() => {
    // arr[1] = '吃肉'
    // arr.length = 0
    //❌错误写法 ↓ ↓ 这种写法视图不会更新
    // arr = ['睡觉', '看小说', '刷抖音']
}, 3000)

//保持数据的响应性
let {name} = toRefs(person);

// console.log(person)

setTimeout(() => {
    person.name = '韩梅梅'
}, 2000)

//声明一个ref来引用组件/元素

let sub = ref();

console.log(sub)

</script>